<template>
  <div class="layout-padding row justify-center" >
    <div style="width: 600px; max-width: 100vw;">
      <q-card style="margin-top: 10px">
        <q-card-title class="text-center" style="background-image:url(statics/personal-home-head.gif);">
          <span>
             <img :src="(customer.logoRes || 'statics/hg-logo-head.png') | avatarView"
               style="height: 75px;width:75px;border-radius: 50%;"/>
          </span>
          <div>
              <span style="font-size: 1.5rem">{{customer.nickname}}</span>
              <span style="color:#17536b">{{customer.sex}}</span>
          </div>
          <div @click="toAttentionInfo">
              <span>关注</span>
              <span style="color:#17536b">{{customer.attentionCount || 0 | convertNum}}</span>
              <span> | </span>
              <span>粉丝</span>
              <span style="color:#17536b">{{customer.fansCount || 0 | convertNum}}</span>
          </div>
          <div >
              <span><q-icon name="edit"/>(<font style="color:#17536b">{{customer.topicCount || 0}}</font>)</span>
              |
              <span><q-icon name="visibility"/>(<font style="color:#17536b">{{customer.pageview | convertNum}}</font>)</span>
          </div>
          <div>
            <span style="font-size: 1rem">个性签名：</span>
            <span style="font-size: 0.9rem;color:#17536b;">{{customer.summary | contentLengthEllipsis}}</span>
          </div>
        </q-card-title>
      </q-card>
      <q-card-separator  style="height:3px" color="red"/>
      <q-item>
        <q-item-main>
         动态：
        </q-item-main>
      </q-item>
      <topic-list-compo ref="perTopicList" :belongId="customer.id"></topic-list-compo>   
      <content-edit-compo ref="topicAddEdit" v-if="isself" v-on:commit-result="addNewTopic"></content-edit-compo>
    </div>
  </div>
</template>

<script>
import {
  QTransition,
  QCard,
  QCardTitle,
  QCardMain,
  QBtn,
  QSelect,
  QIcon,
  QCardSeparator,
  QItem,
  QItemMain,
  
} from "quasar";

import topicListCompo from "../community/topic-list-compo";
import contentEditCompo from '../content-edit-compo'
import Storage from '../../../utils/storage'
import customerApi from '../../../https/customerApi'
import topicApi from '../../../https/topicApi'
export default {
  components: {
    contentEditCompo,
    topicListCompo,
    QTransition,
    QCard,
    QCardTitle,
    QCardMain,
    QBtn,
    QSelect,
    QIcon,
    QCardSeparator,
    QItem,
    QItemMain,
  },
  data() {
    return {
      customerId:this.$route.query.customerId || Storage.curuserId(),
      customer: {}
    };
  },
  computed:{
    isself() {
      if(Storage.curuserId()) {
        return Storage.curuserId() == this.customerId;
      }else {
        return false;
      }
    }
  },
  mounted() {
    console.log('进入->',this.customerId,'的主页');
    this.loadData();
  },
  methods: {
    loadData() {
      customerApi.personalHome(this.customerId).then(res=>{
          const {status,data} = res;
          if(status == 200) {
            this.customer = data;
          }
      }).catch(err=>{})
      // this.customer = {
      //   id: 12,
      //   logoRes: "",
      //   nickname: "小狼油梦",
      //   sex: "帅锅",
      //   summary:'你懂得越多就越像这个世界的孤儿；你走的越远，越明白世界本是孤儿院',
      //   pageview: 12440,
      //    || 0: 345,
      //   attentionCount: 121,
      //   fansCount: 20300
      // };
    },
    toAttentionInfo() {
      this.$router.push("/personal/attentions-info?customerId="+this.customer.id)
    },
    addNewTopic(commitContent) {
      console.log('添加新的说说：',commitContent);
      const params = {content:commitContent.content,lz:this.customer,attashments:commitContent.attashments};
      topicApi.add(params).then(res=>{
        if(res.status == 200) {
          this.loadData();
          this.$refs.perTopicList.clearDatas();
          this.$refs.perTopicList.loadData(this.customerId,null);
          this.$refs.topicAddEdit.clearDatas();
        }
      }).catch(err=>{})
    }
  }
};
</script>
